<template>
    <!-- 推荐模块 -->
    <div class="home">
        <Scroll class="wrapper" ref="wrapper" :probeType="3" :pulldown="pulldown" :data="swiperList" :pullup="pullup" @scrollToEnd="loadMore" @pulldown="refreshData">

            <van-loading v-if="loading1" style="text-align:center">{{ loading1 ? '释放刷新' :'加载完毕'}}</van-loading>
            <ul>

                <li v-for="(item,index) in swiperList">
                    <img :src="item.imgUrl" alt="">
                </li>
                <van-loading color="#1989fa" class="loading" v-if="showLoading" size="30px">加载中...</van-loading>
                <!-- 数据加载完毕的时 -->
                <div v-if="hasData" class="hasData">
                    数据加载完毕
                </div>
                <!-- 占位符 -->
                <div class="divide">
                </div>
            </ul>
        </Scroll>
    </div>
</template>

<script>
//引入插件
import Scroll from '@/components/Scroll.vue'
import { getSwiperList } from '@/common/api/index.js'
import { Toast } from 'vant'
import Vue from 'vue'
Vue.use(Toast)
export default {
    name: "Home",
    data () {
        return {
            swiperList: [],
            pulldown: true,
            pullup: true,
            loading1: false,
            showLoading: false,
            hasData: false
        }
    },
    activated () {
        this.$refs.wrapper.refresh()
        // setTimeout(() => {
        //     this.$refs.wrapper._initScroll()
        // }, 20)
    },
    mounted () {
        getSwiperList().then(res => {
            this.swiperList = [...res.data]
            console.log(this.swiperList);
        })
    },
    components: {
        Scroll
    },
    methods: {
        getSwiperList () {
            getSwiperList().then(res => {
                this.swiperList = [...this.swiperList, ...res.data]
                console.log(this.swiperList);
            })
        },
        // 下拉加载更多方法
        loadMore () {
            this.showLoading = true
            console.log(this.showLoading);
            setTimeout(() => {
                this.getSwiperList()
                this.showLoading = false
            }, 1000)
        },
        // 上拉刷新方法
        refreshData () {
            this.swiperList = []
            this.loading1 = true
            setTimeout(() => {
                getSwiperList().then(res => {
                    this.swiperList = res.data
                    Toast('刷新成功')
                }).finally(() => {
                    this.loading1 = false
                })
            }, 200)
        }
    }
};
</script>

<style scoped>
.wrapper {
    flex: 1;
    overflow: hidden;
}

img {
    width: 100%;
}

.loading {
    padding-top: 8px;
    height: 20px;
    text-align: center;
    background: #f0f0f0;
}

.hasData {
    padding-top: 8px;
    color: #b3b4b5;
    background: #f0f0f0;
    font-size: 16px;
    height: 50px;
    text-align: center;
}
.divide {
    height: 200px;
    background: #f0f0f0;
}
</style>